<template>
  <div class="manager">
    <p>管理员列表</p>
    <el-table :data="tableData" :row-class-name="tableRow" border>
      <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
      <el-table-column label="姓名" prop="username" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.index == editShow">
            <el-input size="mini" v-model="scope.row.username" :placeholder="usernameTip"></el-input>
          </span>
          <span v-else>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" prop="telephone" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.index == editShow">
            <el-input size="mini" v-model="scope.row.telephone" :placeholder="telephoneNullTip"></el-input>
          </span>
          <span v-else>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button v-if="scope.row.index != editShow" size="mini" type="primary" :disabled="editShow != null &&scope.row.index != editShow" @click="editShow = scope.row.index">编辑</el-button>
          <el-button v-if="scope.row.index != editShow" size="mini" type="danger" :disabled="editShow != null &&scope.row.index != editShow" @click="deleteManager(scope.row)">删除</el-button>

          <el-button v-if="scope.row.index == editShow" size="mini" type="primary" @click="preservation(scope.row)">保存</el-button>
          <el-button v-if="scope.row.index == editShow" size="mini" type="danger" @click="cancle(scope.row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

    <p style="margin-top: 10px; text-align: right;">
      <el-button size="mini" type="success" :disabled="editShow != null" @click="addManager">新增</el-button>
    </p>

    <p>
      <el-button @click="$emit('closeDialog')">关闭</el-button>
    </p>

  </div>
</template>

<script>
  export default {
    props: ['row'],
    data() {
      var validatorPhone = function (rule, value, callback) {
        if (value == undefined) {
          callback(new Error('手机号不能为空'))
        } else if (!/^1\d{10}$/.test(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        tableData: [],
        editShow: null,
        usernameTip: null,
        telephoneNullTip: null
      }
    },

    mounted() {
      this.tableData = this.row.managerList;
    },

    methods: {
      tableRow({row,rowIndex}) {
        row.index = rowIndex;
      },

      addManager() {
        this.tableData.push({})
        this.editShow = this.tableData.length - 1;
      },

      cancle(row) {
        if(row.id) {
          this.editShow = null;
        } else {
          this.tableData.splice(row.index,1);
          this.editShow = null;
        }
      },

      deleteManager(row) {
        this.$confirm('确定要删除此管理员吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/shop/shop-manager/delete',
            data: {managerId: row.id}
          }).then((res) => {
            if(res.code == 200) {
              this.$message.success('删除管理员成功');
              this.tableData.splice(row.index,1);
            } else {
              this.$message.warning(res.desc)
            }
          })
        }).catch(() => {});
      },

      update(row) {
        row.shopId = this.row.id;
        row.managerId = row.id;
        this.$axios({
          method: 'post',
          url: '/shop/shop-manager/update-manager',
          data: row
        }).then((res) => {
          if(res.code == 200) {
            this.$message.success('管理员修改成功');
          } else {
            this.$message.warning(res.desc)
          }
        })
      },

      add(row) {
        row.shopId = this.row.id;
        this.$axios({
          method: 'post',
          url: '/shop/shop-manager/add-manager',
          data: row
        }).then((res) => {
          if(res.code == 200) {
            this.$message.success('管理员添加成功');
          } else {
            this.$message.warning(res.desc)
          }
        })
      },

      preservation(row) {
        if(row.username) {
          if(row.telephone) {
            if(!/^1\d{10}$/.test(row.telephone)) {
              this.telephoneNullTip = "手机号格式错误"
              this.$message.warning('手机号格式错误')
            } else {
              if(row.id) {
                this.update(row);
              } else {
                this.add(row)
              }
              this.editShow = null;
              this.telephoneNullTip = null;
              this.usernameTip = null;
            }
          } else {
            this.telephoneNullTip = "手机不能为空"
            this.$message.warning('手机不能为空')
          }
        } else {
          this.usernameTip = "姓名不能为空";
          this.$message.warning('姓名不能为空')
        }
      }
    }
  }
</script>

<style scoped>
  p {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }



</style>
